<template>
  <div class='app-container'>
    <el-card>
      <el-row :gutter='10'>
        <el-col :span='2'>
          <el-button
            v-permission="'permission.create'"
            icon='el-icon-circle-plus-outline'
            size='mini'
            type='primary'
            @click='createVisible = true'
          >{{ $t('common.create') }}
          </el-button>
        </el-col>
        <el-col :span='19'>
          <el-input
            v-model='filterText'
            :placeholder="$t('permission.keywords')"
            size='mini'
          />
        </el-col>
        <el-col :span='1'>
          <el-button icon='el-icon-refresh' size='mini' type='primary' @click='getTree' />
        </el-col>
        <el-col :span='2'>
          <el-tooltip style='margin-top: 5px' :content="$t('permission.startSortText')" placement='left'>
            <el-switch
              v-model='sort'
              v-permission="'permission.update'"
              :active-text="$t('permission.sort')"
              class='fr'
              @change='sortHandle'
            />
          </el-tooltip>
        </el-col>
      </el-row>
      <el-row style='margin-top: 20px'>
        <el-col :span='24' class='margin-t-5'>
          <div class='block'>
            <el-tree
              ref='tree'
              v-loading='loading'
              :data='data'
              :default-expand-all='expand'
              :draggable='sort'
              :empty-text="$t('common.emptyText')"
              :expand-on-click-node='false'
              :filter-node-method='filterNode'
              :props='defaultProps'
              node-key='id'
              @node-drop='handleDrop'
            >
            <span
              slot-scope='{
                node,
                // eslint-disable-next-line vue/no-template-shadow
                data
              }'
              class='custom-tree-node'
            >
              <span><e-icon :icon-name='data.icon' /> {{ node.label }} <small class='color-909'>{{
                  data.name
                }}</small></span>
              <span>
                <el-button
                  v-permission="'permission.create'"
                  size='mini'
                  type='text'
                  @click='() => createSubPermission(data)'
                >
                  {{ $t('permission.addSon') }}
                </el-button>
                <el-button
                  v-permission="'permission.update'"
                  size='mini'
                  type='text'
                  @click='() => update(data)'
                >
                  {{ $t('common.update') }}
                </el-button>
                <el-popconfirm
                  v-permission="'permission.delete'"
                  :cancel-button-text="$t('common.cancelButtonText')"
                  :confirm-button-text="$t('common.confirmButtonText')"
                  :title="$t('common.confirmDelete')"
                  @onConfirm='remove(data)'
                >
                  <el-button
                    slot='reference'
                    size='mini'
                    type='text'
                  >
                    {{ $t('common.delete') }}
                  </el-button>
                </el-popconfirm>
              </span>
            </span>
            </el-tree>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      :visible.sync='createVisible'
      title='add'
    >
      <template slot='title'>
        {{ $t('common.create') }}
        <el-popover
          placement='right'
          trigger='click'
          width='400'
        >
          <el-alert
            :closable='false'
            show-icon
            type='info'
          >
            <template slot>
              <help />
            </template>
          </el-alert>
          <el-button slot='reference' icon='el-icon-edit' type='text'>
            {{ $t('common.help') }}
          </el-button>
        </el-popover>
      </template>
      <create :pid='pid' :success='success' />
    </el-dialog>
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      :visible.sync='updateVisible'
      title='修改'
    >
      <template slot='title'>
        {{ $t('common.update') }}
        <el-popover
          placement='right'
          trigger='click'
          width='600'
        >
          <el-alert
            :closable='false'
            show-icon
            type='info'
          >
            <template slot>
              <help />
            </template>
          </el-alert>
          <el-button slot='reference' icon='el-icon-edit' type='text'>{{ $t('common.help') }}</el-button>
        </el-popover>
      </template>
      <update :id='updateId' :success='success' />
    </el-dialog>
  </div>
</template>
<script>
import { deleted, drop, tree } from '@/api/companyPermissions'
import create from './create'
import update from './update'
import help from './help'

export default {
  name: 'Permissions',
  components: {
    create,
    update,
    help,
  },
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'title',
      },
      filterText: '',
      loading: true,
      createVisible: false,
      pid: 0,
      updateId: 0,
      updateVisible: false,
      sort: false,
      expand: true,
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },
  mounted() {
    this.getTree()
  },
  methods: {
    getTree() {
      this.loading = true
      this.data = []
      tree({
        'guard_name': 'enterprise_admin',
      }).then(response => {
        this.loading = false
        this.data = response.data.tree
      }).catch(reason => {
        this.loading = false
      })
    },
    success() {
      this.pid = 0
      this.updateId = 0
      this.createVisible = false
      this.updateVisible = false
      this.getTree()
    },

    update(data) {
      const { id } = data
      this.updateId = id
      this.updateVisible = true
    },

    createSubPermission(data) {
      this.pid = data.id
      this.createVisible = true
    },

    remove(data) {
      const { id } = data
      deleted({
        id: id,
      }).then(response => {
        this.$message({
          message: response.message,
          type: 'success',
        })
        this.getTree()
      })
    },

    filterNode(value, data) {
      if (!value) return true
      return data.title.indexOf(value) !== -1
    },

    // 拖拽成功完成时触发的事件
    handleDrop(draggingNode, dropNode, dropType, ev) {
      drop({
        'dragging': draggingNode.key,
        'drop': dropNode.key,
        'type': dropType,
      }).then(response => {
        this.getTree()
        this.$message({
          message: response.message,
          type: 'success',
        })
      })
    },

    sortHandle(value) {
      this.sort = value
    },
  },
}
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
